import React, { Component } from 'react'
// 受控组件
// React 的 state 成为“唯一数据源”。
// 渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。
// 被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。
// input textarea select

export default class App extends Component {
  state = {
    username: '',
    password: '',
    lesson: 1,
    note: ''
  }
  handlerChange = (event) => {
    this.setState({
      [event.target.name]: event.target.value
    })
  }
  render() {
    return (
      <div>
        <input onChange = { this.handlerChange } name="username" value = { this.state.username } type="text" placeholder = "用户名"/> <br/>
        <input onChange = { this.handlerChange } name="password" value = { this.state.password } type="password" placeholder = "密码"/> <br/>
        <select onChange = { this.handlerChange } name="lesson" value = { this.state.lesson }>
          <option value={1}>1阶段</option>
          <option value={2}>2阶段</option>
          <option value={3}>3阶段</option>
        </select>
        <textarea onChange = { this.handlerChange } name="note" value={ this.state.note } placeholder="备注"></textarea><br/>
      </div>
    )
  }
}
